<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>申请店主</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <style type="text/css">
    	.mui-content p{
    		position: relative;
    		padding: 30px 15px;
    		background: #fff;
    		margin: 15px 0 0 0;
    		color: #333;
    		text-align: center;
    	}
    	.mui-content p:after{
    		content: '';
    		background: #65d4a3;
    		height: 1px;
    		width: 100%;
    		position: absolute;
    		left: 0;
    		bottom: 0;
    	}
    	.mui-content form{
    		background: #fff !important;
    		padding: 0 15px 30px 15px;
    		width: 100% !important;
    		position: relative;
    	}
    	#sub{
    		width: 100%;
    	}
    	#file{
    		display: none;
    	}
    	.id form .mui-input-row:nth-child(1):after,
    	.id form .mui-input-row:nth-child(2):after{
    		background: none;
    	}
    	.id form .mui-input-row:nth-child(1){
    		overflow: inherit;
    	}
    	#change_file{
    		float: none;
    		width: auto;
    	}
    	#img{
    		position: absolute;
    		right: 15px;
    		display: inline-block;
    		width: 100px;
    		height: 100px;
    		z-index: 999;
    	}
    	#img>img{
    		width: 100%;
    		height: 100%;
    	}
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">申请店主</h1>
	</header>
    
    <div class="mui-content id">

		<p>提交好资料等待通过。</p>
		<form  class="mui-input-group"  action="" method="post" enctype="multipart/form-data">
			<div class="mui-input-row">
				<div id="img"></div>
			</div>
			<div class="mui-input-row">
				<label class="name">商家图片</label>
				<input type="file" name="myfile" id="file" accept="image/*"/>
				<button type="button" id="change_file" class="mui-btn">选择图片</button>
			</div>
			<div class="mui-input-row">
				<label class="name">商家名称</label>
				<input type="text" class="mui-input-clear n_name" name="brand_name" placeholder="请输入商家名称">
			</div>
			<div class="mui-input-row">
				<label class="name">商家简介</label>
				<input type="text" class="mui-input-clear n_name" name="brand_desc" placeholder="请输入商家简介（选填）">
			</div>
			<div class="mui-input-row">
				<label class="name">经营范围</label>
				<input type="text" class="mui-input-clear n_name" name="brand_zhuti" placeholder="请输入经营范围（选填）">
			</div>
			<div class="mui-input-row">
				<label class="name">公司地址</label>
				<input type="text" class="mui-input-clear n_name" name="brand_guimo" placeholder="请输入公司地址（选填）">
			</div>
			<div class="mui-input-row">
				<label class="name">联系电话</label>
				<input type="text" class="mui-input-clear n_name" name="brand_phone" placeholder="请输入联系电话（选填）">
			</div>
			<div class="mui-input-row">
				<button type="button" id="sub" class="mui-btn mui-btn-primary">提交</button>
			</div>
		</form>
    </div>    
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	
    	/******		上传图片		********/
    	$('#change_file').click(()=>{
    		$('#file').click()
    	})
    	$('#file').change(e=>{
    		let img = e.target.files[0]
    		var reader = new FileReader()
    		reader.readAsDataURL(img)
    		reader.onload=e=>{
    			$('#img').html(`<img src="${e.target.result}"/>`)
    			$('#change_file').html('重新选择')
    		}
    	})
    	/********		正则验证		************/
    	$('#sub').click(()=>{
    		let [check,name,phone,img] = [true,$('input[name="brand_name"]').val(),$('input[name="brand_phone"] ').val(),$('#file').get(0).files[0]]
    		if(name=='' && check){
    			mui.toast('请输入商家名称')
    			check = false
    			return false
    		}
    		if(!img && check){
    			mui.toast('请选择商家图片')
    			check = false
    			return false
    		}
	        var pattern = /^1[0-9]{10}$/;
    		if(!pattern.test(phone) && check){
    			mui.toast('请输入正确的手机号')
    			check = false
    			return false
    		}
    		if (check) {
    			$('form').submit()
    		}
    	})
    </script>
</body>
</html>
